<template>
	<view class="bruce" id="conent">
		<ul class="bubble-bgwall">
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
			<li class="bubble">Vue</li>
		</ul>
		<view class="toptitle" @click="home">
			智能农业监控系统
		</view>
		<view class="showcontent">
			<view class="introduction">
				<scroll-view id="scrollview" scroll-y>
					<h2>introduction</h2>
					<p><span>在这个数字化、智能化的新时代，我们团队以创新的思维、扎实的技术，致力于智能农业监控系统的设计与实现。我们深知，农业作为国家的根本，其现代化、智能化发展对于提升农业生产效率、保障粮食安全具有重要意义。因此，我们团队秉持着对技术的热情和对农业的敬畏，勇攀科技高峰，为智能农业的发展贡献自己的力量。</span>
					</p>

					<p><span>我们的团队由一群充满激情和创造力的成员组成，他们来自不同的领域，拥有各自的专业技能和独特视角。在智能农业监控系统的研发过程中，我们充分发挥团队协作的力量，相互学习、共同进步。我们紧跟时代潮流，将物联网、微信小程序、网页后台等技术相结合，为用户提供便捷、高效的服务。同时，我们不断探索和创新，结合AI技术对云平台数据进行分析和预测，为精准种植和水肥管理提供有力支持。</span>
					</p>

					<p><span>在项目实施过程中，我们注重细节，精益求精。我们深知每一个环节的疏忽都可能影响到整个系统的稳定性和可靠性。因此，我们从硬件设备的选型、软件平台的搭建到数据分析算法的优化，都力求做到最好。我们的努力也得到了用户的认可和好评，这让我们更加坚定了继续前行的信心。</span>
					</p>

					<p><span>展望未来，我们将继续秉承“创新、协作、精益求精”的团队精神，不断推动智能农业监控系统的发展和完善。我们相信，在团队的共同努力下，我们一定能够为实现农业现代化、智能化做出更大的贡献！</span>
					</p>
					<swiper class="swiper" indicator-dots autoplay circular indicator-color="rgba(193, 193, 193, .9)"
						indicator-active-color="rgba(0, 150, 136, .6)">
						<swiper-item>
							<view class="imges">
								<p>
									<span>成员：罗海东</span>
									<span>职位：组长</span>
								</p>
							</view>
							<view class="maxim"><span>成员箴言：</span>
								<text>基于物联网的智能农业监控系统，融合微信小程序与网页后台，实时展示环境数据，历史数据可视化，AI助力精准决策，远程控制终端节点，科技引领智慧农业新篇章。</text>
								<text>IoT-based Smart Agricultural Monitoring System, with dual platforms of WeChat Mini Program and webpage, brings real-time data at fingertips, predicts the future with AI analysis, and controls remotely with ease, leading the new era of intelligent agriculture.</text>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="imges">
								<p>
									<span>成员：杨浩</span>
									<span>职位：组员</span>
								</p>
							</view>
							<view class="maxim"><span>成员箴言：</span></view>
						</swiper-item>
						<swiper-item>
							<view class="imges">
								<p>
									<span>成员：李振</span>
									<span>职位：组员</span>
								</p>
							</view>
							<view class="maxim"><span>成员箴言：</span></view>
						</swiper-item>
						<swiper-item>
							<view class="imges">
								<p>
									<span>成员：潘小龙</span>
									<span>职位：组员</span>
								</p>
							</view>
							<view class="maxim"><span>成员箴言：</span></view>
						</swiper-item>
						<swiper-item>
							<view class="imges">
								<p>
									<span>成员：陈俊宏</span>
									<span>职位：组员</span>
								</p>
							</view>
							<view class="maxim"><span>成员箴言：</span></view>
						</swiper-item>
					</swiper>
					<p><span>In this new era of digitization and intelligence, our team is committed to the design and
							implementation of an intelligent agricultural monitoring system with innovative thinking and
							solid technology. Deeply aware of the significance of modernizing and intellectualizing
							agriculture for enhancing agricultural production efficiency and ensuring food security, we
							uphold a passionate pursuit of technology and respect for agriculture, bravely scaling the
							peaks of technological advancement and contributing our strength to the development of smart
							agriculture.</span></p>

					<p><span>Our team consists of passionate and creative members from diverse fields, each possessing
							unique professional skills and perspectives. In the development of the intelligent
							agricultural monitoring system, we fully leverage the power of team collaboration, learning
							from each other and making progress together. Keeping up with the trends of the times, we
							integrate technologies such as the Internet of Things, WeChat Mini Programs, and web
							backends to provide users with convenient and efficient services. Simultaneously, we
							continuously explore and innovate, combining AI technology to analyze and predict data from
							the cloud platform, providing strong support for precision planting and water and fertilizer
							management.</span></p>

					<p><span>During the project implementation, we pay attention to details and strive for excellence.
							We are deeply aware that negligence in any link may affect the stability and reliability of
							the entire system. Therefore, from the selection of hardware equipment, the establishment of
							software platforms, to the optimization of data analysis algorithms, we strive to achieve
							the best. Our efforts have also received recognition and praise from users, giving us even
							more confidence to continue moving forward.</span></p>

					<p><span>Looking ahead, we will continue to uphold the team spirit of "innovation, collaboration,
							and continuous improvement," continuously promoting the development and perfection of the
							intelligent agricultural monitoring system. We believe that with the joint efforts of our
							team, we will definitely make greater contributions to the modernization and
							intellectualization of agriculture!</span></p>
				</scroll-view>
			</view>
		</view>
		<view class="righttop">
			<span @click="LoginRegister">登录</span> /<span @click="LoginRegister">注册</span>
		</view>
		<view class="winfroted-glass">
			<ul class="nav1">
				<li class="title1" @click="home">系统简介</li>
				<li class="title1" @click="LoginRegister">进入系统</li>
				<li class="title1" @click="relatedTechnologies">相关技术</li>
				<li class="title1" @click="InsiteCommunity">进入社区</li>
				<li class="title1" @click="teamSpirit">团队风采</li>
				<li class="title1" @click="aboutUs">关于我们</li>
			</ul>
		</view>
		<view class="andshowcontent">
			<view class="andintroduction">
				<scroll-view id="andscrollview" scroll-y>
					<h2>introduction</h2>
					<p><span>在这个数字化、智能化的新时代，我们团队以创新的思维、扎实的技术，致力于智能农业监控系统的设计与实现。我们深知，农业作为国家的根本，其现代化、智能化发展对于提升农业生产效率、保障粮食安全具有重要意义。因此，我们团队秉持着对技术的热情和对农业的敬畏，勇攀科技高峰，为智能农业的发展贡献自己的力量。</span>
					</p>

					<p><span>我们的团队由一群充满激情和创造力的成员组成，他们来自不同的领域，拥有各自的专业技能和独特视角。在智能农业监控系统的研发过程中，我们充分发挥团队协作的力量，相互学习、共同进步。我们紧跟时代潮流，将物联网、微信小程序、网页后台等技术相结合，为用户提供便捷、高效的服务。同时，我们不断探索和创新，结合AI技术对云平台数据进行分析和预测，为精准种植和水肥管理提供有力支持。</span>
					</p>

					<p><span>在项目实施过程中，我们注重细节，精益求精。我们深知每一个环节的疏忽都可能影响到整个系统的稳定性和可靠性。因此，我们从硬件设备的选型、软件平台的搭建到数据分析算法的优化，都力求做到最好。我们的努力也得到了用户的认可和好评，这让我们更加坚定了继续前行的信心。</span>
					</p>

					<p><span>展望未来，我们将继续秉承“创新、协作、精益求精”的团队精神，不断推动智能农业监控系统的发展和完善。我们相信，在团队的共同努力下，我们一定能够为实现农业现代化、智能化做出更大的贡献！</span>
					</p>
					<swiper class="swiper" indicator-dots autoplay circular indicator-color="rgba(193, 193, 193, .9)"
						indicator-active-color="rgba(0, 150, 136, .6)">
						<swiper-item>
							<view class="imges">
								<p>
									<span>成员：罗海东</span>
									<span>职位：组长</span>
								</p>
							</view>
							<view class="maxim"><span>成员箴言：</span>
							<text>基于物联网的智能农业监控系统，融合微信小程序与网页后台，实时展示环境数据，历史数据可视化，AI助力精准决策，远程控制终端节点，科技引领智慧农业新篇章。</text>
							<text>IoT-based Smart Agricultural Monitoring System, with dual platforms of WeChat Mini Program and webpage, brings real-time data at fingertips, predicts the future with AI analysis, and controls remotely with ease, leading the new era of intelligent agriculture.</text></view>
						</swiper-item>
						<swiper-item>
							<view class="imges">
								<p>
									<span>成员：杨浩</span>
									<span>职位：组员</span>
								</p>
							</view>
							<view class="maxim"><span>成员箴言：</span></view>
						</swiper-item>
						<swiper-item>
							<view class="imges">
								<p>
									<span>成员：李振</span>
									<span>职位：组员</span>
								</p>
							</view>
							<view class="maxim"><span>成员箴言：</span></view>
						</swiper-item>
						<swiper-item>
							<view class="imges">
								<p>
									<span>成员：潘小龙</span>
									<span>职位：组员</span>
								</p>
							</view>
							<view class="maxim"><span>成员箴言：</span></view>
						</swiper-item>
						<swiper-item>
							<view class="imges">
								<p>
									<span>成员：陈俊宏</span>
									<span>职位：组员</span>
								</p>
							</view>
							<view class="maxim"><span>成员箴言：</span></view>
						</swiper-item>
					</swiper>
					<p><span>In this new era of digitization and intelligence, our team is committed to the design and
							implementation of an intelligent agricultural monitoring system with innovative thinking and
							solid technology. Deeply aware of the significance of modernizing and intellectualizing
							agriculture for enhancing agricultural production efficiency and ensuring food security, we
							uphold a passionate pursuit of technology and respect for agriculture, bravely scaling the
							peaks of technological advancement and contributing our strength to the development of smart
							agriculture.</span></p>

					<p><span>Our team consists of passionate and creative members from diverse fields, each possessing
							unique professional skills and perspectives. In the development of the intelligent
							agricultural monitoring system, we fully leverage the power of team collaboration, learning
							from each other and making progress together. Keeping up with the trends of the times, we
							integrate technologies such as the Internet of Things, WeChat Mini Programs, and web
							backends to provide users with convenient and efficient services. Simultaneously, we
							continuously explore and innovate, combining AI technology to analyze and predict data from
							the cloud platform, providing strong support for precision planting and water and fertilizer
							management.</span></p>

					<p><span>During the project implementation, we pay attention to details and strive for excellence.
							We are deeply aware that negligence in any link may affect the stability and reliability of
							the entire system. Therefore, from the selection of hardware equipment, the establishment of
							software platforms, to the optimization of data analysis algorithms, we strive to achieve
							the best. Our efforts have also received recognition and praise from users, giving us even
							more confidence to continue moving forward.</span></p>

					<p><span>Looking ahead, we will continue to uphold the team spirit of "innovation, collaboration,
							and continuous improvement," continuously promoting the development and perfection of the
							intelligent agricultural monitoring system. We believe that with the joint efforts of our
							team, we will definitely make greater contributions to the modernization and
							intellectualization of agriculture!</span></p>
				</scroll-view>
				<view class="top" @click="home">
					<image class="pic" src="../../static/left.png"></image>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cssid: ''
			}
		},
		onLoad(e) {
			this.cssid = e.cssid;
		},
		mounted() {
			this.draw();
		},
		methods: {
			teamSpirit() {
				uni.reLaunch({
					url: '/pages/teamSpirit/teamSpirit?cssid=' + this.cssid
				})
			},
			InsiteCommunity() {
				uni.navigateTo({
					url: '/pages/InsiteCommunity/InsiteCommunity?cssid=' + this.cssid
				})
			},
			relatedTechnologies() {
				uni.navigateTo({
					url: '/pages/relatedTechnologies/relatedTechnologies?cssid=' + this.cssid
				})
			},

			aboutUs() {
				uni.navigateTo({
					url: '/pages/aboutUs/aboutUs?cssid=' + this.cssid
				})
			},
			home() {
				uni.navigateTo({
					url: '/pages/home/home'
				})
			},
			LoginRegister(e) {
				let userid = uni.getStorageSync('userid')
				if (userid !== '') {
					uni.navigateTo({
						url: '/pages/Deviceinformation/Deviceinformation?cssid=' + this.cssid,
						animationType: 'zoom-fade-out', // 指定动画类型
						animationDuration: 100 // 动画时长
					})
				} else {
					uni.navigateTo({
						url: '/pages/LoginRegister/LoginRegister?cssid=' + this.cssid,
					animationType: 'zoom-fade-out', // 指定动画类型
					animationDuration: 100 // 动画时长
					})
				}
			},
			draw(e) {
				let themes = document.querySelector('.bruce');
				let color = document.querySelectorAll(".bubble")
				if (this.cssid == 1) {
					this.button = false;
					this.title = "白天模式"
					this.cssid = 1
					themes.style.background = 'linear-gradient(270deg, #0a0b35, #120144)'
					color.forEach(function(element) {
						element.style.color = '#83c0f7'
					});

				} else {
					this.title = "夜间模式"
					this.button = true;
					this.cssid = 0
					themes.style.background = 'linear-gradient(270deg, #819cad, #81a5bd)'
					color.forEach(function(element) {
						element.style.color = '#6661e6'
					});

				}
			}

		}
	}
</script>
<style lang="scss">
	@media screen and (min-width: 640px) {
		#conent {
			background: #030812 !important;

			.toptitle {
				position: fixed;
				margin-left: 5px;
				width: 100%;
				padding: 20px;
				z-index: 12;
				font-size: 24px;
				font-family: "楷体", sans-serif;
				top: 0px;
				font-weight: bold;
				color: #d8d8d8;
				left: 0;
				display: block;
				background: #393d49;
				background-image: url('https://gd-hbimg.huaban.com/23c7d4ff432744f58bbd2087eb6745a4f66d95c757996-Z6BbHB_fw1200');
				background-repeat: no-repeat;
				background-size: 100vw;
			}

			.righttop {
				position: fixed;
				margin-left: 5px;
				width: 50%;
				padding: 20px 40px 20px 0;
				z-index: 12;
				font-size: 24px;
				font-family: "楷体", sans-serif;
				top: 0;
				font-weight: bold;
				color: #d8d8d8;
				right: 0;
				display: block;
				text-align: right;
				background: transparent;

				span {
					&:hover {
						color: #009688;
					}
				}
			}

			.showcontent {
				background: rgba(255, 255, 255, 0.5);
				z-index: 10;
				display: block;
				justify-content: center;
				position: fixed;
				left: 0;
				margin: 0 50px 0 50px;
				width: 100%;
				height: 100%;
				backdrop-filter: blur(3px);

				.introduction {
					background-color: rgba(0, 0, 0, 0.126);
					display: block;
					overflow: hidden;
					box-sizing: border-box;
					position: relative;
					margin-top: 120px;
					margin-left: 120px;
					margin-right: 100px;
					padding: 20px;
					border-radius: 5px;

					#scrollview {
						width: 100%;
						height: 80vh;
						background-color: transparent;

						h2,
						h3 {
							color: #111111;
							padding: 5px;
						}

						p {
							color: #eee;
							line-height: 35px;
							text-indent: 2em;
							font-size: 18px;

							span {
								padding: 5px;
								background-image: linear-gradient(to right, #171f1f, #002622);
								background-repeat: no-repeat;
								background-size: 0% 2px;
								background-position: left bottom;
								transition: background-size 1s;

								a {
									color: #eee;
									text-decoration: none;
								}

								&:hover {
									background-size: 100% 2px;
								}
							}

						}

						.swiper {
							background-color: #111111;
							color: #fff;
							width: 80vw;
							height: 40vh;
							margin: 20px auto;
							border-radius: 10px;
							overflow: hidden;

							.imges {
								width: 30vw;
								height: 100vh;
								background-color: #819cad;
								background-image: url('../../static/logo.png');
								background-position: center center;
								background-size: cover;

								p {
									display: none;
								}

								&:hover {
									p {
										position: relative;
										bottom: -35vh;
										height: 25px;
										line-height: 25px;
										margin: auto;
										width: 100%;
										display: block;
										background-color: #393d49;

										span {
											width: 100%;
											font-size: 16px;
											text-align: center;
										}

									}
								}

							}

							.maxim {
								float: right;
								top: -100vh;
								width: 60vw;
								position: relative;
								padding: 20px;
								height: 100vh;
								background-color: #002622;

								span {
									width: 100%;
									padding: 20px;
									display: block;
									text-align: center;
								}
								text{
									padding: 20px;
									text-indent: 2em;
									display: block;
								}
							}
						}

						.bottom {
							padding: 10px;
							display: block;
							position: relative;
							text-align: center;
							margin-top: 40px;
							background-color: #848484;
							border-radius: 5px;
						}

						image {
							display: block;
							width: 375px;
							height: 375px;
							border-radius: 5px;
							margin: 5px auto;
							background-position: center center;
							background-size: cover;
						}
					}


				}

			}


			.winfroted-glass {
				background-color: transparent;
				z-index: 10;
				width: 140px;
				display: flex;
				position: fixed;
				left: 0px;
				top: 10px;

				.nav1 {
					margin-top: 30px;
					width: 120px;
					height: 100vh;
					background-color: #393d49;
					position: relative;
					display: block;
					margin-left: 5px;
					box-sizing: border-box;
					padding: 50px 0 0 0;
					border-left: 5px solid #222e6f;
					justify-content: center;
					text-align: center;

					.title1 {
						width: 100%;
						margin: 10px auto;
						padding: 10px 0;
						list-style: none;
						text-align: center;
						color: #d8d8d8;
						transition: background-color 0.3s ease;

						&:hover {
							background: #009688;
							border-right: #ffffff 2px solid;
							cursor: pointer;
						}
					}
				}
			}

			.andshowcontent {
				display: none;
			}
		}
	}

	.bruce {
		background-image: linear-gradient(270deg, #819cad, #81a5bd);
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;

		.winfroted-glass {
			display: none;
		}

		.showcontent {
			display: none;
		}

		.toptitle {
			display: none;
		}

		.righttop {
			display: none;
		}

		.frosted-glass {
			box-sizing: border-box;
			overflow: hidden;
			position: fixed;
			display: flex;
			top: 20vh;
			align-items: center;
			width: 72vw;
			height: 60vh;
			border-radius: 1%;
			box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
			backdrop-filter: blur(10px);
			transition: 0.5s ease;
			animation: code 2s;

		}

		@media (max-width: 640px) {
			.frosted-glass .title {
				font-size: 2em;
			}
		}
	}

	.bubble-bgwall {
		position: relative;
		width: 100%;
		height: 100%;
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.andshowcontent {
		z-index: 10;
		display: block;
		justify-content: center;
		position: fixed;
		margin: 0 50px 0 50px;
		width: 100%;
		height: 100%;

		.andintroduction {
			background-color: rgba(0, 0, 0, 0.626);
			display: block;
			overflow: hidden;
			box-sizing: border-box;
			position: relative;
			margin-top: 30px;
			margin-left: 10px;
			margin-right: 10px;
			padding: 10px;
			border-radius: 5px;

			#andscrollview {
				width: 100%;
				height: 90vh;
				color: #eaeaea;
				font-size: 18px;
				background-color: transparent;

				h2,
				h3 {
					color: #eaeaea;
					padding: 5px;
				}

				.swiper {
					background-color: #002622;
					color: #fff;
					width: 80vw;
					height: 60vh;
					margin: 20px auto;
					border-radius: 10px;
					overflow: hidden;

					.imges {
						width: 100%;
						height: 20vh;
						background-image: url('../../static/logo.png');
						background-position: center center;
						background-size: cover;
						background-color: #819cad;

						p {
							display: none;
						}

						&:hover {
							p {
								position: relative;
								bottom: -15vh;
								height: 25px;
								line-height: 25px;
								margin: auto;
								text-align: center;
								width: 100%;
								display: block;
								background-color: #393d49;

								span {
									width: 100%;
									font-size: 16px;
									text-align: center;
								}

							}
						}
					}

					.maxim {
						background-color: #002622;
						width: 100%;
						height: 40vh;

						span {
							width: 100%;
							padding: 5px;
							display: block;
							text-align: center;
						}
						text{
							padding: 5px;
							text-indent: 2em;
							display: block;
						}
					}
				}

				p {
					color: #dfdfdf;
					line-height: 35px;
					text-indent: 2em;
					font-size: 16px;

					a {
						color: #eee;
						text-decoration: none;
					}

					span {
						padding: 5px;
						background-image: linear-gradient(to right, #171f1f, #002622);
						background-repeat: no-repeat;
						background-size: 0% 2px;
						background-position: left bottom;
						transition: background-size 1s;

						&:hover {
							background-size: 100% 2px;
						}
					}

				}

				.bottom {
					display: block;
					position: relative;
					text-align: center;
					margin-top: 40px;
					background-color: #848484;
					border-radius: 5px;
				}

				image {
					display: block;
					width: 85vw;
					height: 45vh;
					border-radius: 5px;
					margin: 5px auto;
					background-position: center center;
					background-size: cover;
				}

			}
		}

		.top {
			display: block;
			position: relative;
			bottom: 150px;
			width: 50px;
			height: 50px;
			right: 0;
			padding: 10px;
			float: right;
			background-color: #009688;
			overflow: hidden;
			border-radius: 50%;
			box-sizing: border-box;

			.pic {
				width: 100%;
				height: 100%;
			}
		}
	}

	.bubble {
		display: flex;
		position: absolute;
		bottom: -200px;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		width: 50px;
		height: 50px;
		background-color: rgba(255, 255, 255, 0.15);
		color: #44397a;
		animation: bubble 15s infinite;
	}

	.bubble:nth-child(1) {
		left: 10%;
	}

	.bubble:nth-child(2) {
		left: 20%;
		width: 90px;
		height: 90px;
		animation-duration: 7s;
		animation-delay: 2s;
	}

	.bubble:nth-child(3) {
		left: 25%;
		animation-delay: 4s;
	}

	.bubble:nth-child(4) {
		left: 40%;
		width: 60px;
		height: 60px;
		background-color: rgba(255, 255, 255, 0.3);
		animation-duration: 8s;
	}

	.bubble:nth-child(5) {
		left: 70%;
	}

	.bubble:nth-child(6) {
		left: 80%;
		width: 120px;
		height: 120px;
		background-color: rgba(255, 255, 255, 0.2);
		animation-delay: 3s;
	}

	.bubble:nth-child(7) {
		left: 32%;
		width: 160px;
		height: 160px;
		animation-delay: 2s;
	}

	.bubble:nth-child(8) {
		left: 55%;
		width: 40px;
		height: 40px;
		font-size: 12px;
		animation-duration: 15s;
		animation-delay: 4s;
	}

	.bubble:nth-child(9) {
		left: 25%;
		width: 40px;
		height: 40px;
		background-color: rgba(255, 255, 255, 0.3);
		font-size: 12px;
		animation-duration: 12s;
		animation-delay: 2s;
	}

	.bubble:nth-child(10) {
		left: 85%;
		width: 160px;
		height: 160px;
		animation-delay: 5s;
	}

	@keyframes bubble {
		0% {
			opacity: 0.5;
			transform: translateY(0) rotate(45deg);
		}

		25% {
			opacity: 0.75;
			transform: translateY(-400px) rotate(90deg);
		}

		50% {
			opacity: 1;
			transform: translateY(-600px) rotate(135deg);
		}

		100% {
			opacity: 0;
			transform: translateY(-1000px) rotate(180deg);
		}
	}

	@keyframes code {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>